<template >
	<view style="height: 1500rpx;" >
		<view class="sore" :data-active="theme" :style="{'padding-top':this.CustomBar+'rpx'}" >
			<view class="sore1">
				<image src="../../static/icon-back-white.png" @tap="router"/>
				<view class="sore-item">收益排行榜</view>
			</view>
			<view class="sore2" >
				<view v-for="(item,index) in list" :key="index" class="sore2-item" @tap="previe(item.icon || imglogo)">
					<image :src="item.icon || imglogo" :style="{width:item.width,height:item.height}" mode="aspectFill"></image>
				</view>
			</view>
			<view class="day">
				<view class="day-item" v-for="(item,index) in sort" :key="index" :class="{'show':currey==index}" @tap="currey=index">
					{{item.mouth}}
				</view>
			</view>
			<view class="sore3" >
				<view v-for="item in setting" class="x-color" >
					{{item}}
				</view>
			</view>
			<!-- column.slice(0,11) -->
			<view class="sore3" v-for="(item,index) in column.slice(0,11)" :key="index" >
				<view  class="u-color">
					<image class="soreimage" v-if="index<=2" mode="aspectFill" :src="'../../static/home/sort'+Number(index+1)+'.png'">
					<text v-else class="soretext" :class="{'show':index+1<10}">{{index+1}}</text>
				</view>
				<view  class="u-color">
					{{tings(item.name)}}
				</view>
				<view  class="u-color u-color-red">
					{{pinter(item.profit)}}
					
				</view>
				<view  class="u-color">
					<!-- 123 -->
					<image @tap="sharees(tings(item.name),pinter(item.profit))" src="../../static/home/sortshare.png" mode=""></image>
				</view>
			</view>
			<hide v-if="column.length=='0'" />
			<scroll-view scroll-y="true" v-if="popup" @tap="popup = false" class="scroll" >
			     <canvas canvas-id="firstCanvas" id="firstCanvas" style="padding-bottom: 50rpx;"  :style="{ width: `${imageW}px`, height: `${imageH}px` }" ></canvas>
			</scroll-view>
			<!-- <canvas canvas-id="firstCanvas" id="firstCanvas" v-if="popup" @tap="popup = false" :style="{ width: `${imageW}px`, height: `${imageH}px` }" style="z-index: 99998;position: absolute;top: 70rpx;left: 50rpx;"></canvas> -->
			<u-popup v-model="popup" mode="bottom" class="models" >
			  <view class="popup">
			    <view class="title">截图分享至</view>
			    <p-share :image="vals" style="background: #FFFFFF;"></p-share>
			  </view>
			</u-popup>
			<!-- <view class="popup" v-if="popup" style="z-index: 999;">
			  <view class="title">截图分享至</view>
			  <p-share ref="share" :image="resultBase64"></p-share>
			</view> -->
		</view>
	</view>
</template>

<script>
	import qr from 'qr-image'
	export default {
		data() {
			return {
				imglogo:'https://zhugelianghua.oss-cn-beijing.aliyuncs.com/image/headimage.png',//默认头像
				vals: '',
				imageW: uni.upx2px(650),
				imageH: uni.upx2px(1200),
				isshare: '', //分享按钮
				qrcode: '', //图片
				popup:false,
				sort: [{
						mouth: '今日'
					},
					{
						mouth: '本月'
					},
					{
						mouth: '总收益'
					}
				],
				currey: 0,
				list: [{
						icon: '/static/logo.png',
					},
					{
						icon: '/static/logo.png',
					},
					{
						icon: '/static/logo.png',
						width: '80rpx',
						height: '80rpx'
					}
				],
				setting:['排名','用户昵称','收益(USDT)','分享'],
				column:[],
				showTitle:false,//余额不足提示
				theme:'',
			}
		},
		watch:{
			currey(val){
			  this.ranking()
			}
		},
		computed:{
			pinter(){
				return t=>{
					// if(!t) return '0.0000';
					return this.util.decimal(t)
				}
			},
			tings(){
				return t=>{
					if(!t) return '无';
					if(t.length<=6) return t;
					return t.substring(0,3)+"***"+t.substring(t.length-3,t.length)
				}
			},
			option(){
				return this.$state.user
			} 
		},
		onLoad() {
			this.ranking()
		},
		onHide() {
			this.showTitle=false
		},
		methods: {
			previe(e){
				uni.previewImage({
							current:1, //预览图片的下标
							urls:[e] //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
						})
			},
			ranking(){//排行版
				this.request.post({
					url:'order/getRankingList',
					params:{
						type:Number(this.currey+1)
					}
				}).then(res=>{
						let data=res.data.data
						let arrays=[]
						for(let i=0;i<data.length;i++){
							arrays.push(data[i])
						}
						if(arrays.length=='0'){//没有数据
							this.column=[];
							
							return
						} 
						for(let i=0;i<this.list.length;i++){//每次切换时间 头像清空
							this.list[i].icon=''
						}
						this.column=arrays
						for(let i=0;i<this.column.length;i++){
							if(i=='0'){
								this.list[1].icon=this.column[0].image
							}else if(i=='1'){
								this.list[0].icon=this.column[1].image
							}else if(i=='2'){
								this.list[2].icon=this.column[2].image || imglogo
							}
						}
				})
			},
			sharees(phone,price) {
			  this.popup = true
			  this.qrR(phone,price)
			},
			qrR(phone,price) {
			  uni.showLoading({
			    title: '生成中'
			  })
			  let share='http://zhugelianghua.oss-cn-beijing.aliyuncs.com/zhuge/app/sortshare.png';
			  let form = 'http://www.zglh.site/register/#/?mark_code='+uni.getStorageSync('Login').code
			  const qrcode ='data:image/png;base64,' +uni.arrayBufferToBase64(qr.imageSync(form,{ margin: 2 }))
			  var context = uni.createCanvasContext('firstCanvas')
			  // 背景
			  context.drawImage(share, 0, 0, this.imageW, this.imageH)
			  // 账号
			  context.setFontSize(15)
			  context.fillText(phone,uni.upx2px(100),uni.upx2px(930))
			  // 金额
			  context.setFontSize(15)
			  context.setFillStyle('#16D172')
			  context.fillText(price,uni.upx2px(400),uni.upx2px(930))
			  context.drawImage(qrcode, uni.upx2px(480), uni.upx2px(1020), 55, 55) //二维码
			  setTimeout(() => {
			    context.draw(false, () => {
			      uni.canvasToTempFilePath({
			        canvasId: 'firstCanvas',
			        success: res => {
			          this.vals = res.tempFilePath
			        }
			      })
			    })
			    uni.hideLoading()
			  }, 2000)
			},
			router(){
				this.$Router.back(1)
			},
			
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF;
	}

	.sore {
		background-image: url(../../static/sore.png);
		background-size: 100%;
		background-repeat: no-repeat;
		height: 650rpx;
		.sore1 {
			@include flex;
			height: 70rpx;
			padding: 0rpx 30rpx 0rpx;
			// justify-content: space-between;

			.sore-item {
				width: 100%;
				font-size: 40rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #F8F8F8;
				text-align: center;
			}
			image{
				width: 25rpx;
				height: 37rpx;
			}
		}
		.sore2 {
			display: flex;
			justify-content: center;
			margin: 90rpx 10rpx 0rpx;
			.sore2-item {
				text-align: center;
				margin: 50rpx 45rpx 0rpx 48rpx;
				/* #ifndef H5*/
					margin: 30rpx 45rpx 0rpx 48rpx;
					// border: 1px solid red;
				/* #endif */
				image {
					border-radius: 50%;
					width: 80rpx;
					height: 80rpx;
				}
				.sore-num {
					text-align: center;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: bold;
					// line-height: 50rpx;
					padding-top: 19rpx;
					color: #FDE51B;
				}

				.sore-text {
					text-align: center;
					color: rgba(#F8F8F8, 0.4);
				}
			}
			.sore2-item:nth-child(1){
				margin-top:150rpx;
				/* #ifndef H5*/
					margin-top: 130rpx;
				/* #endif */
			}
			.sore2-item:nth-child(3){
				margin-top: 220rpx;
				/* #ifndef H5*/
					// margin-top: 195rpx;
					margin: 195rpx 45rpx 0rpx 58rpx;
				/* #endif */
			}
		}
	}
	.day{
		background-color: #FFFFFF;
		@include flex;
		justify-content: space-between;
		margin: 70rpx 20rpx 20rpx;
		// line-height: 60rpx;
		padding: 25rpx 30rpx;
		// border-radius-left: 20rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
		.day-item  {
			width: 33.33%;
			text-align: center;
		}
		.show{
			color: $light-color;
		}
		.day-item+.day-item{
			border-left: 1rpx solid $light-color;
		}
	}
	.sore3{
		padding:5rpx 30rpx;
		@include flex;
		justify-content: space-between;		
		border-bottom: 1px solid rgba(153, 153, 153, 0.2);
		
		.x-color{
			width: 25%;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 90rpx;
		}
		.x-color:nth-child(4){
			text-align: right;
		}
		.u-color{
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 90rpx;
			color: #333333;
			width: 25%;
			// border: 1px solid red;
			.soreimage{
				width: 55rpx;
				height: 50rpx;
			}
			.soretext{
				background: #F3C31B;
				border-radius: 50%;
				// width: 52rpx;
				// height: 52rpx;
				padding: 15rpx;
				color: #FFFFFF;
				text-align: center;
			}
			.show{
				padding: 12rpx 22rpx;
			}
			image{
				width: 35rpx;
				height: 35rpx;
				margin-top: 30rpx;
			}
		}
		.u-color:nth-child(4){
			text-align: right;
		}
		.u-color-red{
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 90rpx;
			color: #16D172;
		}
		// .x-color,.u-color:nth-child(1){
		// 	width: 25%;
			
			
		// }
		// .x-color,.u-color:nth-child(2){
		// 	width: 25%;
			
			
		// }
		// .x-color,.u-color:nth-child(3){
		// 	width: 25%;
			
			
		// }
		// .x-color,.u-color:nth-child(4){
		// 	width: 25%;
		// 	text-align: right;
			
		// }
	}
	.popup-content {
		// position: absolute;
		// top:450rpx;
		// left: 50%;
		// margin-left: -295rpx;
		width: 590rpx;
		height: 388rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
	    text-align: center;
		.titleer {
			// height: 50rpx;
			width: 100%;
			line-height: 100rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			border-bottom: 1rpx solid rgba(153, 153, 153, 0.2);
			opacity: 0.93;
		}
	
		.body-content {
			padding: 30rpx 40rpx;
	
			.text {
				margin-bottom: 24rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}
	
		.btn {
			margin: 0 auto;
			width: 422rpx;
			height: 80rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
			background: $light-color;
			opacity: 1;
			border-radius: 6rpx;
		}
	}
	models{
			/deep/ .u-drawer-content-visible {
	    -webkit-transform: translate3D(0px, 0px, 0px) !important;
	    transform: translate3D(0px, 0px, 0px) !important;
		background: rgba(0, 0, 0, 0.0);
	}
		}
		.popup{
			// border: 1px solid red;
			background: #FFFFFF;
			width: 100%;
			height: 200rpx;
			.title{
				padding: 20rpx 15rpx;
			}
		}
		.scroll{
			width: 100%;
			height: 72vh;
			z-index: 999998;
			position: fixed;
			top: 100rpx;
			left: 50rpx;
			// padding-bottom: 50rpx;
		}
		.slot-content{
			padding: 30rpx 50rpx;
			font-size: 28rpx !important;
			text-align: center;
		}
		
</style>
